<template>
  <div class="snInfo">
    <div class="info_top flex flex_bet">
      <div class="title">设备信息</div>
      <el-link type="primary" class="refresh" @click="iconClick(snInfoTabel.sn)"><i class="el-icon-refresh-right" style="margin-right:5px" :class="imgRotate ? 'img_go' : 'img_stop'"></i>刷新</el-link>
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item>
        <template slot="title">
          <div class="flex flex_bet felx_align" style="width:90%">
            <div class="mation"><i class="iconfont iconziyuanxhdpi" ></i>设备截屏
            </div>
            <div>
              <el-button type="primary" size="mini" @click.stop="getlaunchScreenshot($event,snInfoTabel.sn)">截屏</el-button>
              <el-button  type="primary" size="mini" @click="getquerySnScreens(snInfoTabel.sn)">查看截屏</el-button>
              <el-button type="primary" size="mini" @click.stop="getdeleteAll(snInfoTabel.sn)">清除截图</el-button>
            </div>
          </div>
        </template>
        <div class="center">
          <div class="block">
            <div class="hint" v-if="!printscreenSwiper.length">截屏后需要30秒的时间从服务器获取数据，请耐心刷新</div>
            <el-carousel height="548px" trigger="click" :autoplay="false">
              <el-carousel-item v-for="(item,index) in printscreenSwiper" :key="index">
                <h3 class="small">{{ item.createtime| newDate }}</h3>
                <div style="width:100%;text-align: center;" class="location_img">
                  <img v-if="item.imgSize" :src="item.img" alt="" :style="item.imgSize.height > 1200 ? 'height:548px;width:342px' : 'width:548px;height:342px'">
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="flex flex_bet felx_align" style="width:90%">
            <div class="mation" style="margin-right:50px"><i class="iconfont iconyuanchengguanli" ></i>远程重置</div>
            <div>
              <el-button type="primary" size="mini" @click.stop="singleSnRestarts(snInfoTabel.id)">重启设备</el-button>
              <el-button type="primary" size="mini" @click.stop="singleSnReset(snInfoTabel.id)">恢复出厂设置</el-button>
            </div>
          </div>
        </template>
      </el-collapse-item>
      <el-collapse-item name="1">
        <template slot="title">
          <div class="mation"><i class="iconfont iconflat" ></i>本机信息
            <span class="tilte_prompt">(更新时间： {{snInfoTabel.update_time | newDate}})</span>
          </div>
        </template>
        <div class="content">
          <ul>
            <li class="flex felx_align">
              <p>机型:</p>
              <div class="details">{{snInfoTabel.device}}</div>
            </li>
            <li class="flex felx_align">
              <p>本机SN:</p>
              <div class="details">{{snInfoTabel.sn}}</div>
            </li>
            <li class="flex felx_align">
              <p>IMEI:</p>
              <div class="details">{{snInfoTabel.imei}}</div>
            </li>
            <li class="flex felx_align">
              <p>系统版本:</p>
              <div class="details">{{snInfoTabel.system_version != '' ? `安卓${snInfoTabel.system_version}` : ''}}</div>
            </li>
            <li class="flex felx_align">
              <p>固件版本号:</p>
              <div class="details">{{snInfoTabel.firmware_version}}</div>
            </li>
            <li class="flex felx_align">
              <p>ROM版本:</p>
              <div class="details">{{snInfoTabel.rom}}</div>
            </li>
            <li class="flex felx_align">
              <p>屏幕分辨率:</p>
              <div class="details">{{snInfoTabel.screen_rate}}</div>
            </li>
            <li class="flex felx_align" v-if="activeRoleName">
              <p>推送ID:</p>
              <div class="details">{{snInfoTabel.jpush_id}}</div>
            </li>
            <li class="flex felx_align">
              <p>首次激活时间:</p>
              <div class="details">{{snInfoTabel.createtime| newDate}}</div>
            </li>
          </ul>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="mation"><i class="iconfont iconcpu"></i>硬件信息</div><span class="tilte_prompt">(更新时间： {{snInfoTabel.update_time | newDate}})</span>
        </template>
        <div class="content">
          <ul>
            <li class="flex felx_align">
              <p>电量:</p>
              <div class="flex felx_align" style="font-size:12px">
                {{snInfoTabel.electric == '' ? '' : snInfoTabel.electric + '%'}}
                <battery style=" width: 90px;height: 37px;margin-left: 5px" :proQuantity="Number(snInfoTabel.electric)" />
              </div>
            </li>
            <li class="flex felx_align">
              <p>设备内存:</p>
              <div class="details">{{snInfoTabel.memory}}</div>
            </li>
            <li class="flex felx_align">
              <p>存储:</p>
              <div class="details">( 剩余空间: {{snInfoTabel.storage}} )</div>
            </li>
            <li class="flex felx_align">
              <p>CPU:</p>
              <div class="details">{{snInfoTabel.CPU}}</div>
            </li>
          </ul>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="mation"><i class="iconfont iconyingyong1"></i>应用信息 {{`已安装 ( ${app_install.length} )`}}</div>
          <span class="tilte_prompt" v-if="app_install.length">(更新时间： {{app_install[0].create_time | newDate}})</span>
        </template>
        <div class="content">
          <table>
            <tr>
              <th style="text-align: left;">应用名</th>
              <th>运行状态</th>
              <th>版本号</th>
              <th>大小</th>
              <th>安装时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item,index) in app_install" :key="index">
              <td class="flex felx_align">
                <div class="app-img"><img :src="item.app_img | imgErr" alt=""></div>
                <div>{{item.app_name}}</div>
              </td>
              <td><i class="iconfont icondian3" :class="item.state ? 'on_line' : 'off_line'"></i></td>
              <td>{{item.app_version_name}}</td>
              <td>{{item.app_size | zhDate}}</td>
              <td>{{item.install_time | newDate}}</td>
              <td>
                <el-button type="danger" size="mini" style="padding:4px 10px" @click.stop="getforceStopApp(item)">关闭</el-button>
                <el-button type="danger" size="mini" style="padding:4px 10px" @click.stop="getuninstallPackage(item)">卸载</el-button>
              </td>
            </tr>
          </table>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title" >
          <div class="mation"> <i class="iconfont icondizhidingweiweizhi"></i>{{snInfoTabel.address}}</div>
          <span class="tilte_prompt">(更新时间： {{snInfoTabel.update_time | newDate}})</span>
          <svg-icon icon-class="city" class="city_icon" @click="gotoCity" />
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import snDialog from "@/components/snDialog"
import { getEquip, getAppBySn, launchScreenshot, querySnScreens, deleteAll, singleSnRestart, singleSnReset, forceStopApp, refreshEquipParam } from "@/api/equipment.js";
import { uninstallPackage } from "@/api/supervise";//删除应用信息
import battery from "@/components/electric"
export default {
  components: { snDialog, battery },
  props: {
    snData: {
      type: String,
      defaulte: ''
    },
    online: {
      type: Number,
      defaulte: 0
    }
  },
  watch: {
    snData(val) {
      if (val) {
        this.activeNames = ['1']
        this.getEquips(val)
        this.getAppBySns(val)
      }
    }
  },
  computed: {
    activeRoleName() {
      return localStorage.getItem('roleName') == '超级管理员' ? true : false
    },
    onlineBtn() {
      return this.online == 1 ? false : true
    }
  },
  data() {
    return {
      snInfoTabel: {},
      app_install: [],
      printscreenSwiper: [],
      activeNames: ['1'],//折叠面板默认第一个打开
      imgRotate: false,
    }
  },
  created() {
    this.getEquips(this.snData)
    this.getAppBySns(this.snData)
  },
  methods: {
    gotoCity() {
      console.log('点击',this.snInfoTabel.sn)
      this.$router.push('/lock/mapFind?sn=' + this.snInfoTabel.sn);
    },
    getEquips(sn) {
      getEquip({ sn: sn }).then(res => {
        this.snInfoTabel = res.data
        console.log('sn信息', this.snInfoTabel)
      }).catch(err => {
        this.snInfoTabel.sn = sn
      })
    },
    //设备信息刷新
    iconClick(sn) {
      this.imgRotate = !this.imgRotate
      let qs = { sn: sn, userId: localStorage.getItem("ID") }
      this.$emit('initWebSocket')
      refreshEquipParam(qs).then(res => {
        this.getEquips(sn)
        this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
      }).catch(err => { })
    },
    //获取应用已安装APP信息
    getAppBySns(sn) {
      getAppBySn({ sn: sn }).then(res => {
        this.app_install = res.data
        console.log('获取应用已安装APP信息',res.data)
      }).catch(err => {
        this.app_install = []
      })
    },
    //截图
    getlaunchScreenshot(event, sn) {
      let text = this.onlineBtn ? '设备离线无法进行截屏' : '是否要发送截图指令?'
      let qs = { userId: localStorage.getItem("ID"), sn: sn }
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        if(!this.onlineBtn) {
          launchScreenshot(qs).then(res => { this.$message({ message: '截屏指令发送成功', type: 'success', customClass: 'mzindex' }) })
        }
      }).catch(() => { })
    },
    //删除截图信息
    getdeleteAll(sn) {
      let qs = { userId: localStorage.getItem("ID"), sn: sn }
      this.$confirm('是否要清除所有截图信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        deleteAll(qs).then(res => {
          this.printscreenSwiper = []
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        })
      }).catch(() => { })
    },
    //查看截图信息
    async getquerySnScreens(sn) {
      let qs = { userId: localStorage.getItem("ID"), sn: sn }
      await querySnScreens(qs).then(res => {
        res.data.forEach(async item => {
          this.$set(item, 'imgSize', await this.getImgSize(item.img))
        })
        this.printscreenSwiper = res.data
      }).catch(err => {
        this.printscreenSwiper = []
        err.code == 400 ? this.$message({ message: '没有截图信息', type: 'error', customClass: 'mzindex' }) : ''
      })
    },
    // 获取图片尺寸
    getImgSize(url) {
      return new Promise((resolve, reject) => {
        let imgObj = new Image()
        imgObj.src = url
        imgObj.onload = () => {
          resolve({ width: imgObj.width, height: imgObj.height })
        }
      })
    },
    //SN重启设备
    singleSnRestarts(id) {
      let qs = { id: id, userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip") }
      this.$confirm('是否要重启?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        singleSnRestart(qs).then(res => {
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        }).catch(err => { })
      }).catch(() => { })
    },
    //SN恢复出厂设置
    singleSnReset(id) {
      let qs = { id: id, userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip") }
      this.$confirm('是否要恢复出厂设置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        singleSnReset(qs).then(res => {
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        }).catch(err => { })
      }).catch(() => { });
    },
    //强制停用设备应用
    getforceStopApp(item) {
      let qs = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), sn: item.sn, packageName: item.app_package }
      forceStopApp(qs).then(res => {
        this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        this.getAppBySns(item.sn)
      }).catch(err => { })
    },
    //SN删除应用
    getuninstallPackage(item) {
      let qs = { userId: localStorage.getItem("ID"), sn: item.sn, package_name: item.app_package }
      uninstallPackage(qs).then(res => {
        this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        this.getAppBySns(item.sn)
      }).catch(err => { })
    }
  }
}
</script>

<style lang="scss" scoped>
.img_go {
  transform: rotate(-360deg);
  transition: all 2s;
}
.img_stop {
  transition: all 2s;
}
.snInfo {
  color: #303133;
  font-size: 14px;
  .info_top {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    background-color: #f3f3f3;
  }
  .mation {
    font-size: 12px;
    background-color: #f9f9f9;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #666666;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    max-width: 66%;
    i {
      margin-right: 5px;
    }
  }
  .content {
    font-size: 12px;
    ul {
      li {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e5e5e5;
        padding: 0 20px;
        color: #232323;
        p {
          color: #999999;
          margin: 0;
          width: 30%;
        }
      }
      li:last-child {
        border: none;
      }
    }
    table {
      color: #999;
      width: 100%;
      font-size: 14px;
      border-collapse: collapse;
      th {
        text-align: center;
        font-weight: 500;
        color: #232323;
        padding-left: 20px;
        font-size: 12px;
      }
      tr {
        line-height: 40px;
        height: 40px;
        padding: 0 20px;
        border-bottom: 1px solid #e5e5e5;
        td {
          padding-left: 20px;
          font-size: 12px;
          text-align: center;
          .app-img {
            height: 30px;
            width: 30px;
            margin-right: 5px;
            img {
              height: 100%;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.details {
  font-size: 12px;
}
.refresh {
  position: relative;
  top: -40px;
  font-size: 14px;
  left: -30px;
}
.hint {
  line-height: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #f56c6c;
  text-align: center;
}
.location_img {
  width: 100%;
  text-align: center;
  position: relative;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.small {
  color: #f56c6c;
  position: absolute;
  bottom: 0;
  right: 5px;
  margin: 0;
  z-index: 99;
}
.tilte_prompt {
  color: #666666;
  font-size: 12px;
  margin-left: 20px;
}
.city_icon {
  position: absolute;
  right: 20px;
  font-size: 26px;
}
</style>

<style scoped>
/deep/ .el-collapse-item__header {
  background-color: #f9f9f9;
}
/deep/ .el-collapse-item__content {
  padding-bottom: 0;
}
</style>